<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - PIXEL EFFECT</title>
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
        <link
            type="text/css"
            rel="stylesheet"
            href="../../three.js/examples/main.css" />
    </head>

    <body>
        <div
            id="container"
            style="background: black"></div>

        <script type="importmap">
            {
                "imports": {
                    "three": "../../three.js/build/three.module.js",
                    "three/addons/": "../../three.js/examples/jsm/"
                }
            }
        </script>

        <script type="module">
            import * as THREE from "three";

            import { DRACOLoader } from "three/addons/loaders/DRACOLoader.js";
            import { OrbitControls } from "three/addons/controls/OrbitControls.js";
            import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
            import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
            import { ShaderPass } from "three/addons/postprocessing/ShaderPass.js";
            import { OutputPass } from "three/addons/postprocessing/OutputPass.js";
            import { FXAAShader } from "three/addons/shaders/FXAAShader.js";

            let camera, scene, renderer, controls;
            let composer, fxaaPass;
            const container = document.querySelector("#container");

            // Configure and create Draco decoder.
            const dracoLoader = new DRACOLoader();
            dracoLoader.setDecoderPath("../../three.js/examples/jsm/libs/draco/");
            dracoLoader.setDecoderConfig({ type: "js" });

            init();

            function init() {
                camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 15);

                scene = new THREE.Scene();
                // scene.background = new THREE.Color(0x443333);
                // scene.fog = new THREE.Fog(0x443333, 1, 4);
                scene.background = new THREE.Color(0x000000);

                // Ground
                // const plane = new THREE.Mesh(
                //     new THREE.PlaneGeometry(8, 8),
                //     new THREE.MeshPhongMaterial({ color: 0xcbcbcb, specular: 0x101010 })
                // );
                // plane.rotation.x = -Math.PI / 2;
                // plane.position.y = 0.035;
                // plane.receiveShadow = true;
                // scene.add(plane);

                // Lights
                const hemiLight = new THREE.HemisphereLight(0x8d7c7c, 0x494966, 1);
                scene.add(hemiLight);

                const spotLight = new THREE.SpotLight();
                spotLight.castShadow = true;
                spotLight.intensity = 5;
                spotLight.angle = Math.PI / 16;
                spotLight.penumbra = 1;
                spotLight.position.set(-1, 1, 1);
                scene.add(spotLight);

                let material;
                material = new THREE.ShaderMaterial({
                    uniforms: {
                        // lightPosition: { value: new THREE.Vector3(0.000001,0.000001,1) },
                        lightPosition: { value: camera.position },
                    },
                    vertexShader: `
                        varying vec2 vUv;
                        varying vec3 Normal;

                        void main() {
                            vUv = uv;
                            vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0);
                            gl_Position = projectionMatrix * modelViewPosition;
                            Normal =  normalize(normal);

                        }`,
                    fragmentShader: `
                        uniform vec3 lightPosition;
                        varying vec3 Normal;

                        void main() {
                                
                            vec3 color = vec3(1.);
                            float intensity = abs( dot(normalize(lightPosition),Normal) );

                            if( abs( intensity ) < 0.5) {
                                gl_FragColor = vec4(vec3(1), 1.0);
                            } else {
                                // gl_FragColor = vec4(vec3(0), 1.0);
                                // discard;
                                gl_FragColor = vec4(vec3(0), 1.0);
                            }
                                
                            // gl_FragColor = vec4(vec3(Normal), 1.0);
                        }`,
                });

                // const mesh = new THREE.Mesh(new THREE.BoxGeometry(0.1, 0.1, 0.1), material);
                // const mesh = new THREE.Mesh(new THREE.SphereGeometry( 0.0015, 32, 16 ), material);
                // const mesh = new THREE.Mesh(new THREE.TorusKnotGeometry( 0.02, 0.006, 100, 16 ), material);
                material = new THREE.MeshStandardMaterial({});
                // material = new THREE.MeshNormalMaterial({});

                const mesh = new THREE.Mesh(new THREE.TorusKnotGeometry(0.02, 0.006, 100, 16), material);

                // mesh.position.set(-0.085, 0.14, 0.02);
                mesh.position.set(0.1, 0.1, 0);
                mesh.castShadow = true;
                mesh.receiveShadow = true;

                scene.add(mesh);

                dracoLoader.load("../../three.js/examples/models/draco/bunny.drc", function (geometry) {
                    geometry.computeVertexNormals();

                    // const material = new THREE.MeshStandardMaterial({ color: 0xa5a5a5 });

                    const mesh = new THREE.Mesh(geometry, material);
                    mesh.castShadow = true;
                    // mesh.receiveShadow = true;
                    scene.add(mesh);

                    // Release decoder resources.
                    dracoLoader.dispose();
                });

                // renderer
                renderer = new THREE.WebGLRenderer({ antialias: false, alpha: false });
                renderer.setPixelRatio(window.devicePixelRatio);
                renderer.setSize(window.innerWidth, window.innerHeight);
                renderer.setAnimationLoop(animate);
                renderer.shadowMap.enabled = true;
                container.appendChild(renderer.domElement);

                controls = new OrbitControls(camera, renderer.domElement);
                controls.target.set(0, 0.1, 0);
                controls.object.position.set(0, 0.1, 0.3);

                window.addEventListener("resize", onWindowResize);

                /**             后处理           */
                const renderPass = new RenderPass(scene, camera);
                renderPass.clearAlpha = 0;

                const pixelRatio = renderer.getPixelRatio();

                // FXAA设计用于在转换为低动态范围和转换为sRGB颜色空间进行显示后，在引擎后处理结束时应用。
                fxaaPass = new ShaderPass(FXAAShader);
                fxaaPass.material.uniforms["resolution"].value.x = 1 / (container.offsetWidth * pixelRatio);
                fxaaPass.material.uniforms["resolution"].value.y = 1 / (container.offsetHeight * pixelRatio);

                composer = new EffectComposer(renderer);

                composer.addPass(renderPass);

                /** 渲染法线信息 */
                const normalMaterial = new THREE.MeshNormalMaterial();

                const normalRenderTarget = new THREE.WebGLRenderTarget(
                    container.offsetWidth * pixelRatio,
                    container.offsetHeight * pixelRatio,
                    {
                        minFilter: THREE.NearestFilter,
                        magFilter: THREE.NearestFilter,
                        type: THREE.HalfFloatType,
                    }
                );

                window.updateNormal = () => {
                    renderOverride(renderer, normalMaterial, normalRenderTarget, 0, 0);
                };

                const PixelPass = new ShaderPass(
                    new THREE.ShaderMaterial({
                        name: "PixelShader",
                        uniforms: {
                            tNormal: { value: normalRenderTarget.texture },
                            /**
                             * ShaderPass 每次render前 传递上一个通道的结果
                             * this.uniforms[ this.textureID ].value = readBuffer.texture;
                             * this.textureID默认为 tDiffuse
                             * 同时需要定义 tDiffuse: { value: null } 确保有一个key接收纹理
                             */
                            tDiffuse: { value: null },
                            resolution: {
                                value: new THREE.Vector2(
                                    1 / (container.offsetWidth * pixelRatio),
                                    1 / (container.offsetHeight * pixelRatio)
                                ),
                            },
                            pixelSize: { value: 3 * 4 },
                            lightPosition: { value: camera.position },
                        },

                        defines: {},

                        vertexShader: /* glsl */ `
                        varying vec2 vUv;

                        void main() {

                            vUv = uv;
                            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

                        }`,

                        fragmentShader: /* glsl */ `
                        precision highp float;

                        uniform sampler2D tDiffuse;
                        uniform sampler2D tNormal;
                        uniform float pixelSize;
                        uniform vec2 resolution;
                        uniform vec3 lightPosition;

                        varying vec2 vUv;

                        // 将每个片段映射到其最近的、不重叠的像素大小窗口的中心。 窗口中心的片段决定了其窗口中其他片段的颜色。
                        vec2 getCoord () {
                            float x = mod( gl_FragCoord.x, pixelSize);
                            float y = mod( gl_FragCoord.y, pixelSize);

                            x = floor(pixelSize / 2.0) - x;
                            y = floor(pixelSize / 2.0) - y;

                            x = gl_FragCoord.x + x;
                            y = gl_FragCoord.y + y;

                            return vec2(x,y) * resolution;
                        }

                        void main() {
                            vec2 coord = getCoord();

                            vec4 normal = texture2D( tNormal, coord );
                            
                            // float intensity = abs( dot( normalize( vec3( lightPosition ) ), normal.rgb ) );
                            // 简单边缘余弦角度
                            float intensity = abs( dot( normalize( vec3( 0,0,1 ) ), normal.rgb ) );
                        
                            vec3 color = texture2D( tDiffuse, coord ).rgb;
                            // color = normal.rgb;
                            // color = vec3(intensity);

                            float normalGentle = normal.x + normal.y + normal.z;

                            if(normalGentle > 0.00){

                                if( intensity > 0.9) {

                                    gl_FragColor = vec4(vec3(0), .0);

                                } else {

                                    // gl_FragColor = vec4(vec3(color), 1.0);
                                    gl_FragColor = vec4(vec3(1), 1.0);
                                    // gl_FragColor = vec4(vec3(1), 1.0);
                                    // discard;

                                }
                            }

                            // gl_FragColor = vec4(vec3(color), 1.0);
                        }
                    `,
                    }),
                    "tDiffuse"
                );

                // 处理颜色格式
                const outputPass = new OutputPass();

                composer.addPass(PixelPass);

                composer.addPass(outputPass);

                composer.addPass(fxaaPass);
            }

            function onWindowResize() {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();

                renderer.setSize(window.innerWidth, window.innerHeight);
            }

            function animate() {
                // renderer.render(scene, camera);
                window.updateNormal && window.updateNormal();
                composer.render();
            }

            // const pixelSizeCatch = {}

            // function getCoord(pixelSize, _x, _y) {
            //     let x = Math.floor(_x) % pixelSize;
            //     let y = Math.floor(_y) % pixelSize;

            //     x = Math.floor(pixelSize / 2) - x;
            //     y = Math.floor(pixelSize / 2) - y;

            //     x = _x + x;
            //     y = _y + y;
            //     return `${x},${y}`;
            // }

            // const pixelSize = 5;

            // for (let i = 0; i < pixelSize * 4; i++) {
            //     for (let j = 0; j < pixelSize * 4; j++) {
            //         const coord = getCoord(pixelSize, j, i)
            //         const item = pixelSizeCatch[coord];
            //         if(!item){
            //             pixelSizeCatch[coord] = `(${j},${i})`
            //         }else {
            //             pixelSizeCatch[coord] += `, (${j},${i})`
            //         }
            //     }
            // }
            function renderOverride(renderer, overrideMaterial, renderTarget, clearColor, clearAlpha) {
                const originalClearColor = new THREE.Color();
                const tempColor = new THREE.Color();

                originalClearColor.copy(renderer.getClearColor(tempColor));

                const originalClearAlpha = renderer.getClearAlpha(tempColor);
                const originalAutoClear = renderer.autoClear;

                renderer.setRenderTarget(renderTarget);
                renderer.autoClear = false;

                clearColor = overrideMaterial.clearColor || clearColor;
                clearAlpha = overrideMaterial.clearAlpha || clearAlpha;

                if (clearColor !== undefined && clearColor !== null) {
                    renderer.setClearColor(clearColor);
                    renderer.setClearAlpha(clearAlpha || 0.0);
                    renderer.clear();
                }

                scene.overrideMaterial = overrideMaterial;
                renderer.render(scene, camera);
                scene.overrideMaterial = null;

                // restore original state

                renderer.autoClear = originalAutoClear;
                renderer.setClearColor(originalClearColor);
                renderer.setClearAlpha(originalClearAlpha);
                // renderer.setRenderTarget(null);
            }
        </script>
    </body>
</html>
